<template>
  <div>
    <div>
      <h1>{{ demo }}</h1>
      <h1 v-text="demoa"></h1>
      <h1 v-html="demo"></h1>
      <h1 v-once>{{ demo }}</h1>
      <button @click="fun()">点我修改demo</button>
      <button @click="funa($event)">点我触发事件对象</button>
      <input type="text" @keydown.space="funb()" />
      <div @click.stop="zuzhi()"></div>
      <zi />
      <fu />
      <A />
      <B />
      <div>
        vuex的数据修改 ---{{ this.$store.state.text }}---
        <button @click="fune()">点我修改</button>
      </div>
      <div>
        <button @click="funf()">点我调用混入的方法</button>
      </div>
      <div>
        <h1>过滤器{{demob|wowo}}</h1>
      </div>
      <div>
        <h1 v-zidingyi>自定义指令</h1>
      </div>
    </div>
  </div>
</template>

<script>
import Zi from "@/components/lianxi/zi.vue";
import Fu from "@/components/lianxi/fu.vue";
import A from "@/components/lianxi/a.vue";
import B from "@/components/lianxi/b.vue";
import { demoe } from "@/mixins";
export default {
  components: { Zi, Fu, A, B },
  mixins: [demoe],
  filters:{
    wowo(val){
        if(val.length>6){
          return val.substr(0,5)+"..."
        }else{
          return val
        }
    }
  },
  data() {
    return {
      demo: "哈喽",
      demoa: "helloword ",
      inputval: "",
      demob:"nasdnciofsfnzdin"
    };
  },
  methods: {
    fun() {
      this.demo = "new";
    },
    funa(xiaoming) {
      console.log(xiaoming.target);
    },
    funb() {
      console.log("按下了空格");
    },
    zuzhi() {
      console.log("阻止事件冒泡");
    },
    fune() {
      this.$store.commit("uptext", { newtext: "修改成功" });
    },
  },
  wacth: {
    demo(newv) {
      console.log("----" + newv);
    },
  },
  directives: {
    zidingyi: {
      inserted(el) {
        el.style.color = "blue";
      },
    },
  },
 
};
</script>

<style>
</style>